<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
	
</style>
<body>

<div><img src="top.jpg"></div>
<button>点赞(<span>520</span>)</button>


<!-- <div><img src="top.jpg"></div>
<button>单击添加事件</button>
<button>单击解除事件</button> -->
</body>
<script type="text/javascript">
// //实例一：单击按钮给图片加事件或者解除事件(可以切换多次)
// i=0;
// $('button').eq(0).click(function(){
// 	$('img').bind('click',function(){
// 		if(i%2==0){
// 			this.src='jiu.jpg';
// 		}else{
// 			this.src='power.jpg';
// 		}
// 		i++;
// 	});
// });
// $('button').eq(1).click(function(){
// 	$('img').unbind();
// });



// //点击按钮之后只能切换一次
// i=0;
// $('button').eq(0).click(function(){
// 	$('img').one('click',function(){
// 		if(i%2==0){
// 			this.src='jiu.jpg';
// 		}else{
// 			this.src='power.jpg';
// 		}
// 		i++;
// 	});
// });



// //点赞功能，只允许点一次
// $('button').one('click',function(){
// 	val=parseInt($('span').html())+1;
// 	$('span').html(val);
// 	$(this).css({'background':'#00f','color':'#fff'});
// })





i=0;
$('button').click(function(){
	if(i==0){
	val=parseInt($('span').html())+1;
	$('span').html(val);
	$(this).css({'background':'#00f','color':'#fff'});		
}else{
alert('thank you it is enough!');
}
i++;
});
</script>
</html>